<template>
    <div class="sample_reels" id="sample_reels">
        <div class="left" id="left">
            <div v-for="(img,index) in leftImg" :key="index" class="img">
                <i class="el-icon-close" v-show="isShow" @click="del(img.imgId)"></i>
                <img :src="img.url" :alt="img.imgId"  @click="ID($event),display($event)">
            </div>
        </div>
        <div class="right" id="right">
             <div v-for="(img,index) in rightImg" :key="index" class="img" >
                <i class="el-icon-close" v-show="isShow" @click="del(img.imgId)"></i>
                <img :src="img.url" :alt="img.imgId"  @click="ID($event),display($event)">
            </div>
        </div>

        <imgShow :show="BogShow" v-if="isBogShow" :url="BogImg.BogUrl" @click.native="display($event)">
            <do-fa>
                <i class="el-icon-star-off" v-if="!isCollection" @click="Collection"></i>
                <i class="el-icon-star-on" v-if="isCollection" @click="Collection"></i>
                <i class="el-icon-download" @click="Download"></i>
            </do-fa>
        </imgShow>

    </div>
</template>

<script>
import imgShow from "./imgShow.vue"
import DoFa from "./DF.vue"

import {download} from "../api/Pictures"
import {removeColl,addColl,selectID} from "../api/Collect"

export default {
    name: 'ThemeWallpaperWebImgList',
    components:{
        imgShow,DoFa
    },
    props:{
        ListImgs:{
            type:Array
        },
        isShow:{
            type:Boolean,
            default:false
        },
        //是否需要大图模块默认没有
        isBogShow:{
            type:Boolean,
            default:false
        },
    },
    data() {
        return {
            bigImg:false,//图片是否放大
            showUrl:"",//放大图片的url
            leftImg:[],//左边的图片
            rightImg:[],//右边的图片
            flag:true,//应该放那边,
            BogShow:false,
            BogImg:{
                BogId:-1,
                BogUrl:"",//大图的url
            },
           
            isCollection:false,//是否收藏
        };
    },
    created (){
        
    },

    watch:{
        ListImgs:{
            handler(newVal, oldval){
                this.classify(newVal)
            }
        },
    },
    computed:{
       

    },
    mounted() {
       
    },

    methods: {
         async ID($event){
            this.BogImg.BogId=$event.target.alt
            this.BogImg.BogUrl=$event.target.src

            let {data}=await selectID({
                picturesId: this.BogImg.BogId,
                userId: this.$store.state.user.userId
            })
            if(data.code===200){
                if(data.data!==null){
                    this.isCollection=true
                }else{
                    this.isCollection=false
                }
            }
        },

        //加载图片
        classify(newVal){
            this.leftImg=[]
            this.rightImg=[]
            for (const item of newVal) {
                if(this.flag){
                    this.leftImg.push(item)
                }else{
                    this.rightImg.push(item)
                }
                this.flag=!this.flag
            }
        },
        //显示大图
        display($event){
            this.BogImg.BogUrl=$event.target.src
            this.BogShow=!this.BogShow
        },

        //删除
        del(ID){
            this.$emit('single',ID);
        },
        //收藏按钮
       async Collection($event){
            $event.stopPropagation();//阻止事件穿透,请放在开头，不然你不知道哪里失效

            let data={}
            //判断是否登陆
            if(this.$store.state.user.userId===-1){
                    this.$dialog.confirm({
                        message: '还没登陆，不能收藏，去登陆吧！',
                    }) .then(() => {
                         this.$router.push("signin")
                    }).catch(() => {
                        return 
                    });
            }else{

                if(!this.isCollection){
                        data = await addColl({
                        picturesId: this.BogImg.BogId,
                        userId: this.$store.state.user.userId
                    }) 
                    if(data.data.code===200){
                        this.isCollection=data.data.data
                    }else{
                        this.$dialog.alert({
                            message:data.data.msg,
                            }).then(() => {
                            
                        }); 
                }
                }else{
                    data = await removeColl({
                        picturesId: this.BogImg.BogId,
                        userId: this.$store.state.user.userId
                    })}

                    if(data.data.code===200){

                        this.isCollection=data.data.data
                      
                    }else{
                        this.$dialog.alert({
                            message:data.data.msg,
                            }).then(() => {
                            
                        }); 
                    }

                
            }

            
         
           // 
          
        },
        //下载
       async Download(event){
            event.stopPropagation();//阻止事件穿透
            let data = await download({
                ID:this.BogImg.BogId
           })

            let list= data.headers["content-disposition"].split("=") 

            let url = window.URL.createObjectURL(new Blob([data.data]));
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;

            
            link.setAttribute('download', list[1]);

            document.body.appendChild(link);
            link.click()
        }
       

    },
};
</script>

<style lang="scss" scoped>
.sample_reels{
    width: 100%;
    box-shadow: 0px 0px 4px 1px #458751;
     display: inline-block;
    position: relative;
    .left,.right{
        display: inline-block;
        width: 50%;
        position: relative;
        .img{
            width: 100%;
            padding: 5px;
            position: relative;
            .el-icon-close{
                float:left;
                position: absolute;
                top: 0;
                right: 0;
                font-size: 30px;
                font-weight: 800;
                color: #e79692;
            }
            img{
                width: 100%;
            }
        }
    }
    .left{
        float: left;
    }
    .right{
       overflow: auto;
    }

}


</style>